<template>
  <section>
    <br />
    <el-form :model="form" ref="form" :rules="FormRules">
      <div style="border: 1px solid #e6e6e6;margin-bottom: 10px;padding:15px">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              label="所属项目:"
              label-width="100px"
              prop="getProjectFirstID"
            >
              <el-select
                disabled
                v-model="form.getProjectFirstID"
                placeholder="请选择所属项目"
              >
                <el-option
                  v-for="(item, index) in project"
                  :key="index + ''"
                  :label="item.project_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="项目模块:"
              label-width="100px"
              prop="getModelFirstID"
            >
              <el-select
                disabled
                v-model="form.getModelFirstID"
                placeholder="请选择接口类型分组"
              >
                <el-option
                  v-for="(item, index) in model"
                  :key="index + ''"
                  :label="item.model_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              label="请求方式:"
              label-width="100px"
              name="qingqiufangshi"
            >
              <el-select
                disabled
                v-model="form.requestType"
                placeholder="请求方式"
              >
                <el-option
                  v-for="(item, index) in requestType"
                  :key="index + ''"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              label="Content-Type:"
              label-width="120px"
              prop="apiGroupLevelFirst_id"
            >
              <el-select
                disabled
                v-model="form.ContentType"
                placeholder="请选择Content-Type"
              >
                <el-option
                  v-for="(item, index) in ContentType"
                  :key="index + ''"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item
              label="接口名称:"
              label-width="100px"
              prop="interface_name_zh"
            >
              <el-input
                disabled
                v-model.trim="form.interface_name_zh"
                prefix-icon="el-icon-edit el-input__icon"
                placeholder="请输入接口名称"
                auto-complete
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="方法名称:"
              label-width="100px"
              prop="interface_name_en"
            >
              <el-input
                disabled
                v-model.trim="form.interface_name_en"
                prefix-icon="el-icon-edit el-input__icon"
                placeholder="请输入方法名称"
                auto-complete
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="类型:" label-width="100px" prop="ApiHttpType">
              <el-select disabled v-model="form.Http" placeholder="请选择类型">
                <el-option
                  v-for="(item, index) in Http"
                  :key="index + ''"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-row :span="22">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="加密方式" name="1">
            <div style="margin: 5px">
              <el-row :span="24">
                <el-col :span="4"
                  ><el-checkbox
                    disabled
                    v-model="checked"
                    @change="jiamiCheck"
                    label="form-data"
                    >加密</el-checkbox
                  ></el-col
                >
              </el-row>
            </div>
            <el-table
              :data="form.MiList"
              highlight-current-row
              v-if="ShowJMType"
            >
              <el-table-column
                prop="encryption"
                label="加密URL"
                min-width="40%"
              >
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="form.MiURL"
                    :value="scope.row.MiURL"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入加密URL"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="decrypt" label="解密URL" min-width="40%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="form.JMiURL"
                    :value="scope.row.JMiURL"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入解密URL"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="请求Header" name="2">
            <div style="margin: 5px">
              <el-row :span="24"> </el-row>
            </div>

            <el-table
              :data="form.headerDict"
              highlight-current-row
              :class="add"
            >
              <el-table-column prop="name" label="KEY" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.header_key"
                    :value="scope.row.header_key"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入KEY"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="_type" label="参数类型" min-width="14%">
                <template slot-scope="scope" prop="">
                  <el-select
                    disabled
                    v-model="scope.row.param_type"
                    placeholder="请求方式"
                  >
                    <el-option
                      v-for="(item, index) in paramType"
                      :key="index + ''"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="Value" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.header_key_value"
                    :value="scope.row.header_key_value"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入value"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="description"
                label="存在依赖"
                min-width="6%"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    disabled
                    v-model="scope.row.relation == 1 ? true : false"
                    @change="subProj(scope.$index, scope.row)"
                    >是</el-checkbox
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="description"
                label="依赖接口"
                min-width="14%"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.relation_interface_id_name"
                    placeholder="请选择依赖接口名称"
                    disabled
                  >
                    <el-option
                      v-for="item in YiLaiApi"
                      :label="item.interface_name_zh"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="依赖接口关键字" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.relation_interface_key"
                    :value="scope.row.relation_interface_key"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入关键字"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="5%">
                <template slot-scope="scope">
                  <i
                    class="el-icon-delete"
                    disabled
                    style="font-size:30px;cursor:pointer;"
                  ></i>
                </template>
              </el-table-column>
              <el-table-column label="" min-width="5%">
                <template slot-scope="scope">
                  <el-button
                    disabled
                    v-if="scope.$index === form.headerDict.length - 1"
                    size="mini"
                    class="el-icon-plus"
                    @click="addHeader"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="请求Body" name="3">
            <div style="margin: 5px" v-if="showlistbtn">
              <!--v-if="showlistbtn"-->
              <el-row :span="24">
                <el-col :span="4"
                  ><el-checkbox
                    disabled
                    v-model="Lchecked"
                    @change="listCheck"
                    label="form-data"
                    >请求body整体为list型</el-checkbox
                  ></el-col
                >
              </el-row>
            </div>
            <div style="margin: 5px" v-if="showListPadding">
              xml标签内list名称:

              <i
                class="el-icon-question"
                style="font-size:15px;cursor:pointer; right"
                color="red"
                @click="help(this)"
              ></i>

              <el-input
                v-model.trim="form.listPadding"
                disabled
                placeholder="xml标签内list名称: 例:PLAN_INFO 转换为xml为 <LIST><PLAN_INFO>?</PLAN_INFO></LIST> "
              ></el-input>
            </div>
            <div style="margin: 5px">
              <el-row :span="24"> </el-row>
            </div>

            <el-table
              :data="form.requestList"
              :cell-class-name="cellcb"
              highlight-current-row
              :class=""
            >
              <el-table-column prop="name" label="KEY" min-width="14%">
                <template slot-scope="scope">
                  <el-input
                    disabled
                    v-model.trim="scope.row.param_key"
                    :value="scope.row.param_key"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入KEY"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column prop="_type" label="参数类型" min-width="14%">
                <template slot-scope="scope">
                  <el-select
                    disabled
                    v-model="scope.row.param_type"
                    placeholder="请求方式"
                    @change="changeTYPE(scope.$index, scope.row)"
                  >
                    <el-option
                      v-for="(item, index) in paramType"
                      :key="index + ''"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="_type3" label="Random类型" min-width="24%">
                <template slot-scope="scope">
                  <el-select
                    disabled
                    v-model="scope.row.random_number_type"
                    clearable
                    placeholder=""
                    :disabled="scope.row.param_type != 'Random'"
                  >
                    <el-option
                      v-for="(item, index) in RandomType"
                      :key="index + ''"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="description"
                label="存在依赖"
                min-width="6%"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    disabled
                    v-model="scope.row.relation == 1 ? true : false"
                    @change="subProj(scope.$index, scope.row)"
                    >是</el-checkbox
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="依赖接口"
                min-width="14%"
                :selectable="checkboxT2"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.relation_interface_id_name"
                    placeholder="请选择依赖接口名称"
                    disabled
                  >
                    <el-option
                      v-for="item in YiLaiApi"
                      :label="item.interface_name_zh"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="依赖接口关键字"
                min-width="14%"
                :selectable="checkboxT2"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.relation_interface_key"
                    :value="scope.row.relation_interface_key"
                    prefix-icon="el-icon-edit el-input__icon"
                    placeholder="请输入关键字"
                    disabled
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="5%">
                <template slot-scope="scope">
                  <i
                    class="el-icon-delete"
                    style="font-size:30px;cursor:pointer;"
                  ></i>
                </template>
              </el-table-column>
              <el-table-column label="" min-width="5%">
                <template slot-scope="scope">
                  <el-button
                    disabled
                    v-if="scope.$index === form.requestList.length - 1"
                    size="mini"
                    class="el-icon-plus"
                    @click="addParameter"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="入参示例" name="inParamShow">
            <el-card class="box-card">
              <el-input
                disabled
                v-model.trim="form.inParamShow"
                type="textarea"
                :rows="5"
                placeholder="请输入入参示例"
              ></el-input>
            </el-card>
          </el-collapse-item>
          <el-collapse-item title="出参示例" name="outParamShow">
            <el-card class="box-card">
              <el-input
                disabled
                v-model.trim="form.outParamShow"
                type="textarea"
                :rows="5"
                placeholder="请输入出参示例"
              ></el-input>
            </el-card>
          </el-collapse-item>
          <el-collapse-item title="内容" name="content">
            <el-card class="box-card">
              <el-input
                disabled
                v-model.trim="form.content"
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
              ></el-input>
            </el-card>
          </el-collapse-item>
        </el-collapse>
      </el-row>
    </el-form>

    <br />
    <br />
    <!-- <router-link :to="{ name: '接口列表', params: {project_id: this.$route.params.project_id}}" style='text-decoration: none;color: aliceblue;'>
            <el-button class="return-list" style="float: right">取消</el-button>
        </router-link>-->
    <el-button class="return-list" style="float: right" @click.native="back"
      >返回</el-button
    >
    <el-dialog
      title="帮助"
      :visible.sync="helpDialogVisible"
      width="35%"
      center
    >
      <span>维护的list名称为:<br />&nbsp&nbsp&nbsp&nbsp<a> PLAN_INFO</a></span>
      <span
        ><br />维护的请求body参数和参数值<a style="color:red"
          >(【用例维护】维护)</a
        >分别为:<br />&nbsp&nbsp&nbsp&nbsp<a>SOURCE、XX平台-测试</a></span
      >
      <span
        ><br />最终xml标签为: <br />&nbsp&nbsp&nbsp&nbsp&lt;<a style="color:red"
          >LIST</a
        >&gt; <br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;<a
          style="color:red"
          >PLAN_INFO</a
        >&gt;
        <br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;<a
          style="color:red"
          >SOURCE</a
        >&gt;<a>XX平台-测试</a>
        <br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;/<a
          style="color:red"
          >SOURCE</a
        >&gt; <br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;/<a
          style="color:red"
          >PLAN_INFO</a
        >&gt; <br />&nbsp&nbsp&nbsp&nbsp&lt;/<a style="color:red">LIST</a>&gt;
      </span>
      <!--

      <span slot="footer" class="dialog-footer">
        <el-button @click="helpDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="helpDialogVisible = false">确 定</el-button>
      </span>-->
    </el-dialog>
  </section>
</template>

<script>
import {
  test,
  editInterface,
  getProjectList,
  getModelList,
  getYiLaiApiList,
} from "../../../../api/api";
export default {
  data() {
    return {
      ShowJMType: false,
      showlistbtn: false,
      showListPadding: false,
      helpDialogVisible: false,
      requestType: [
        { value: "GET", label: "GET" },
        { value: "POST", label: "POST" },
        { value: "PUT", label: "PUT" },
        { value: "DELETE", label: "DELETE" },
      ],
      Http: [
        { value: "HTTP", label: "HTTP" },
        { value: "HTTPS", label: "HTTPS" },
      ],
      paramType: [
        { value: "Int", label: "Int" },
        { value: "String", label: "String" },
        { value: "List", label: "List" },
        { value: "Random", label: "Random" },
        { value: "Date", label: "Date" },
      ],

      RandomType: [
        { value: "Random_Int", label: "Random_Int" },
        { value: "Random_Name", label: "Random_Name" },
        { value: "Random_Email", label: "Random_Email" },
        { value: "Random_IDCard", label: "Random_IDCard" },
        { value: "Random_Addr", label: "Random_Addr" },
        { value: "Random_PhoneNo", label: "Random_PhoneNo" },
      ],
      ContentType: [
        { value: "application/json", label: "application/json" },
        {
          value: "application/x-www-form-urlencoded",
          label: "application/x-www-form-urlencoded",
        },
        { value: "multipart/form-data", label: "multipart/form-data" },
        { value: "text/plain", label: "text/plain" },
        { value: "application/xml", label: "application/xml" },
      ],
      ParameterType: true,
      model: [],
      checkboxT1: false,
      checkboxT2: true,

      project: [],
      YiLaiApi: [],
      //radio: "form-data",
      addHeaderFormVisible: false, //增加头部信息
      addParameterFormVisible: false, //增加入参
      radioType: "",
      result: true,
      activeNames: ["1", "2", "3", "4", "5", "6"],
      id: "",
      request3: false,
      selectable: false,
      flag: false,
      //aaaa:true,
      form: {
        islist: "N",
        getProjectFirstID: "",
        YiLaiApi: "",

        getModelFirstID: "",
        interface_name_zh: "",
        interface_name_en: "",
        status: true,
        //  requestType: 'POST',
        // httpType: 'HTTP',

        apiAddress: "",
        selectable: false,
        //默认check属性yilai=0  不要勾选 不存在依赖
        headerDict: [
          { key: "", _type: "String", relation: "0", yilaijiekou: "" }, //依赖默认给1
          //{key: "", _type: "String",relation:"0",yilaijiekou:""}
        ],
        requestList: [
          { name: "", _type: "String", relation: "0", yilaijiekou: "" },
          { name: "", _type: "String", relation: "0", yilaijiekou: "" },
        ],
        MiList: [{ MiURL: "", JMiURL: "" }],
        //MiURL:'',
        //JMiURL:'',
        //requestParameterType: "",

        data: "",
      },
      FormRules: {
        interface_name_zh: [
          { required: true, message: "请输入接口名称", trigger: "blur" },
          { max: 50, message: "不能超过50个字", trigger: "blur" },
        ],
        //apiAddress : [{ required: false, message: '请输入地址', trigger: 'blur' }],
        //required : [{ type: 'boolean', required: false, message: '请选择状态', trigger: 'blur' }],

        getModelFirstID: [
          {
            type: "number",
            required: true,
            message: "请选择项目模块",
            trigger: "blur",
          },
        ],
        getProjectFirstID: [
          {
            type: "number",
            required: true,
            message: "请选择项目",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    cellcb(row) {
      if (row.row.checkStatus === 1 && row.columnIndex === 0) {
        return "myCell";
      }
    },

    checkRequest() {
      let request = this.form.requestType;
      if (request === "GET" || request === "DELETE") {
        this.request3 = false;
      } else {
        this.request3 = true;
      }
    },
    isJsonString(str) {
      try {
        if (typeof JSON.parse(str) === "object") {
          return true;
        }
      } catch (e) {}
      return false;
    },
    help() {
      this.helpDialogVisible = true;
    },

    subProj: function(index, row) {
      if (row.relation == "0") {
        //未勾选

        row.relation = "1"; //勾选 赋值
      } else if (row.relation == "1") {
        row.relation = "0"; //取消勾选
        //取消勾选清空数据(依赖接口和接口关键字)

        row.relation_interface_id = "";
        row.relation_interface_id_name = "";
        row.relation_interface_key = "";
      }
    },

    back() {
      this.$router.go(-1);
    },

    handleResponseEdit: function(index, row) {
      this.id = index;
    },

    jiamiCheck: function(e, checked) {
      //ShowJMType: 显示隐藏加密模块
      if (this.checked == true) {
        this.ShowJMType = true;
      } else {
        this.ShowJMType = false;
        //清空数据
        this.form.JMiURL = "";
        this.form.MiURL = "";
      }
    },

    changeTYPE: function(index, row) {
      if (row.paramType != "Random") {
        //更改为非Random，Random类型置空
        row.random_number_type = ""; //置空
      }
    },

    listCheck: function(e, Lchecked) {
      if (e == true) {
        this.form.islist = "Y";

        this.showListPadding = true;
      } else if (e == false) {
        this.form.islist = "N";

        this.showListPadding = false;
      }
      this.$forceUpdate();
    },

    EditInterfaceInfo: function() {
      //保存按钮

      if (this.form.data) {
        if (!this.isJsonString(this.form.data)) {
          this.$message({
            message: "数据错误",
            center: true,
            type: "error",
          });
        } else {
          this.addApi();
        }
      } else if (this.form.data) {
        this.$message({
          message: "数据不全",
          center: true,
          type: "warning",
        });
      } else {
        this.editInterfaceinfo();
      }
    },
    getResultDetailList() {
      this.listLoading = true;
      let self = this;

      //let params = { page: self.page, env_name: self.filters.env_name};
      let params = {
        page: self.page,
        pici: this.$route.params.pici,
        interface_name: self.filters.interface_name,
        interface_case_name: self.filters.interface_case_name,
      };

      //var self = this;
      //let params = { project_id: this.$route.params.project_id};

      let headers = {
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };

      getResultDetail(headers, params).then((_data) => {
        self.listLoading = false;
        let { msg, code, data } = _data;

        if (code === "999999") {
          self.total = data.total;
          self.detail = data.data;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    getApiInfo() {
      let self = this;

      let param = {
        api_id: this.$route.params.interface_id,
      };
      $.ajax({
        type: "get",
        url: test + "/api/interface/api_edit",
        async: true,
        data: param,

        headers: {
          Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
        },
        timeout: 5000,

        success: function(data) {
          if (data.code === "999999") {
            data = data.data;

            self.form.interface_name_zh = data.interface[0].interface_name_zh;
            self.form.Http = data.interface[0].ApiHttpType;

            self.form.interface_name_en = data.interface[0].interface_name_en;
            self.form.getProjectFirstID = data.interface[0].project;
            self.form.getModelFirstID = data.interface[0].model;
            self.form.requestType = data.interface[0].request_type;

            self.form.isList = data.interface[0].isList;
            if (self.form.isList == "Y") {
              self.Lchecked = true;
            } else {
              self.Lchecked = false;
            }
            //listPadding
            self.form.listPadding = data.interface[0].listPadding;

            if (self.form.listPadding != "") {
              self.showListPadding = true;
            } else {
              self.showListPadding = false;
            }

            self.form.ApiHttpType = data.interface[0].ApiHttpType;
            if (self.form.ApiHttpType == "WebService") {
              self.showlistbtn = true;
            } else {
              self.showlistbtn = false;
            }

            /***header_key赋值，因为这个下拉只有一个字段所以直接赋值**/
            self.form.header_key = "Content-Type";

            self.form.inParamShow = data.interface[0].in_param_show;
            self.form.outParamShow = data.interface[0].out_param_show;
            self.form.content = data.interface[0].content;

            /***加密解密***/
            if (
              data.interface[0].encryption != "" ||
              data.interface[0].decrypt != ""
            ) {
              self.checked = true;
              (self.ShowJMType = true),
                (self.form.JMiURL = data.interface[0].decrypt);
              self.form.MiURL = data.interface[0].encryption;
            } else {
              self.checked = false;
            }

            /***大部分字段可以反显**/

            var jsonArr = new Array();
            var contentTypeArr = new Array();

            for (var i = 0; i < data.header.length; i++) {
              if (data.header[i].header_key != "Content-Type") {
                jsonArr.push(data.header[i]);
              } else {
                contentTypeArr.push(data.header[i]);
              }
            }

            self.form.requestType = data.interface[0].request_type;
            self.form.ContentType = contentTypeArr[0].header_key_value;

            if (jsonArr.length) {
              self.form.headerDict = jsonArr;
              self.form.headerDict.forEach((row) => {
                if (row.relation == 1) {
                }
              });
            }

            /*****重点****/

            if (data.param.length) {
              self.form.requestList = [];
              data.param.forEach((item) => {
                self.form.requestList.push(item);
              });
            }

            if (data.formatRaw) {
              self.radioType = true;
            }
            // if (data.header.length) {
            //   self.form.head = [];
            //    data.header.forEach((item) => {
            //       self.form.head.push(item)
            //    })
            // }

            self.form.checkData = data.responseData;
            self.radio = data.requestParameterType;
            self.checkRequest();
            self.$forceUpdate();
          } else {
            self.$message.error({
              message: data.msg,
              center: true,
            });
          }
        },
      });
    },
    editInterfaceinfo: function() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let self = this;

          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            self.form.parameterType = self.radio;
            let _type = self.form.parameterType;
            let _type1 = self.form.YiLaiApi;
            let _type3 = self.form.RandomType;
            let _type4 = self.form.Http;
            let _parameter = {};
            _parameter = self.form.requestList;

            let params = {
              //构建参数
              cid: this.$route.params.interface_id,
              //project_id: Number(self.$route.params.project_id),
              getModelFirstID: Number(self.form.getModelFirstID),
              getProjectFirstID: Number(self.form.getProjectFirstID),
              YiLaiApi: self.form.YiLaiApi,
              Http: self.form.Http,

              interface_name_zh: self.form.interface_name_zh,
              interface_name_en: self.form.interface_name_en,
              inParamShow: self.form.inParamShow,
              outParamShow: self.form.outParamShow,
              httpType: self.form.httpType, //httptype能取到值  http/https
              requestType: self.form.request,

              ContentType: self.form.ContentType,

              MiURL: self.form.MiURL,
              JMiURL: self.form.JMiURL,
              isList: self.form.islist,
              listPadding: self.form.listPadding,
              del_flag: 0,
              headerDict: self.form.headerDict, //头部json拼接
              //requestParameterType: _type,
              requestList: _parameter,
              //responseList: self.form.responseList,
              // mockCode: self.form.mockCode,
              data: self.form.data,
              content: self.form.content,
            };

            let headers = {
              "Content-Type": "application/json",
              Authorization:
                "Token " + JSON.parse(sessionStorage.getItem("token")),
            };

            editInterface(headers, params).then((_data) => {
              //    更新detail
              let { msg, code, data } = _data;

              if (code === "999999") {
                //self.$router.push({name: '分组接口列表',
                //  params: {
                //    project_id: self.$route.params.project_id,
                //firstGroup: self.form.getProject
                // }
                //});
                self.$message({
                  message: "保存成功",
                  center: true,
                  type: "success",
                });
                this.$router.go(-1);
              } else {
                self.$message.error({
                  message: msg,
                  center: true,
                });
              }
            });
          });
        }
      });
    },
    editParameterSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.form.requestList[this.id] = this.editForm;
          this.addParameterFormVisible = false;
        }
      });
    },
    handleParameterEdit: function(index, row) {
      this.addParameterFormVisible = true;
      this.id = index;
      this.editForm = Object.assign({}, row);
    },

    // demo  下拉菜单从数据库取值
    getProjects() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getProjectList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var projectjsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              projectjsonArr.push(data[i]);
            }
          }

          self.project = projectjsonArr;
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    // demo  下拉菜单从数据库取值
    getModels() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };
      getModelList(headers, params).then((_data) => {
        let { msg, code, data } = _data;
        if (code === "999999") {
          var modeljsonArr = new Array();

          for (var i = 0; i < data.length; i++) {
            if (data[i].status == 0) {
              modeljsonArr.push(data[i]);
            }
          }

          self.model = modeljsonArr;

          //self.form.getModelFirstID = self.model[0].id
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },
    getYiLaiApis() {
      let self = this;
      let params = {
        project_id: this.$route.params.project_id,
      };
      let headers = {
        "Content-Type": "application/json",
        Authorization: "Token " + JSON.parse(sessionStorage.getItem("token")),
      };

      getYiLaiApiList(headers, params).then((_data) => {
        let { msg, code, data } = _data;

        if (code === "999999") {
          self.YiLaiApi = data;

          //self.form.YiLaiApiFirstID = self.YiLaiApi[0].id
        } else {
          self.$message.error({
            message: msg,
            center: true,
          });
        }
      });
    },

    addParameter() {
      let headers = {
        name: "",
        value: "",
        _type: "String",
        relation: "0",
        yilaijiekou: "",
      };

      this.form.requestList.push(headers);
    },

    delParameter(index) {
      this.form.requestList.splice(index, 1);
      if (this.form.requestList.length === 0) {
        this.form.requestList.push({
          name: "",
          value: "",
          _type: "String",
          relation: "0",
          yilaijiekou: "",
        });
      }
    },
    addHeader() {
      //{name: "",_type:"String", relation: "0",yilaijiekou:""}

      let headers = {
        name: "",
        _type: "String",
        relation: "0",
        yilaijiekou: "",
      };
      this.form.headerDict.push(headers);
    },

    delHeader(index) {
      this.form.headerDict.splice(index, 1);
      if (this.form.headerDict.length === 0) {
        this.form.headerDict.push({
          name: "",
          value: "",
          _type: "String",
          relation: "0",
          yilaijiekou: "",
        });
      }
    },

    cellcb(index) {
      // txt.style.display = "none";
      //this.form.responseList.splice(index, 1);

      if (index.row.checkStatus === 1 && index.row.columnIndex === 0) {
        return "myCell";
      }
    },

    changeParameterType() {
      //不要删除这个加密URL用的到
      if (this.radio === "form-data") {
        this.ParameterType = true;
      } else {
        this.ParameterType = false;
      }
    },
    showData() {
      this.result = true;
    },
    showHead() {
      this.result = false;
    },
    handleChange(val) {},
    onSubmit() {},
  },
  watch: {
    radio() {
      this.changeParameterType();
    },
  },
  mounted() {
    this.getProjects();
    this.getModels();
    this.getYiLaiApis();
    this.getApiInfo();
  },
};
</script>
<!--style 样式-->
<style lang="scss" scoped>
.return-list {
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 25px;
}
.head-class {
  font-size: 17px;
}
.parameter-a {
  display: block;
}
.parameter-b {
  display: none;
}
.selectInput {
  position: absolute;
  /*margin-left: 7px;*/
  padding-left: 9px;
  width: 180px;
  /*border-radius:0px;*/
  /*height: 38px;*/
  left: 1px;
  border-right: 0px;
}
</style>
<style lang="scss">
.selectInput {
  input {
    border-right: 0px;
    border-radius: 4px 0px 0px 4px;
  }
}
</style>

<style>
.myCell .el-checkbox__input {
  display: none;
}
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
</style>
